<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>layui-demo</title>
        <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
        <script src="layui/layui.js"></script>
        <script src="layui/plugin/xm-select.js"></script>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <!-- cdn -->
        <!-- <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <script src="https://www.layuicdn.com/layui/layui.js"></script> -->
    </head>



    <body>

        <div id="demo1" class="xm-select-demo"></div>

        <br>

        <div id="demo2" class="xm-select-demo"></div>
        <br>

        <div id="demo3" class="xm-select-demo"></div>
        <br>

        <div id="demo5" class="xm-select-demo"></div>
        <br>

        <div id="demo6" class="xm-select-demo"></div>
        <br>

        <div id="demo7" class="xm-select-demo"></div>
        <button class="btn" id="demo1-getValue">获取选中值</button>
        <div id="demo1-value"></div>

        <br>
        <div id="demo8" class="xm-select-demo"></div>

        <br> <!-- xm-select 不能使用 input 作为载体-->
       <!-- <input type="text" id="demo9" class="xm-select-demo"><input> -->
       <div id="demo9"></div>
        <script>
            //Demo

            layui.use(['form', 'element', 'layer', 'jquery'], function() {
                var form = layui.form;
                var element = layui.element;
                var layer = layui.layer;


            });

            var list = [{
                    name: '张麦子',
                    value: 1,
                    selected: true //默认选中
                },
                {
                    name: '李四',
                    value: 2,
                    disabled: true //默认禁用

                },
                {
                    name: '王五',
                    value: 3
                },
            ];

            var list1 = [];
            var demo1 = xmSelect.render({
                el: '#demo1',
                tips: '请选择一个王八蛋',
                empty: '呀, 没有数据呢', // 当 list 是空的时候 下拉框会显示 这句话
                data: list
            })


            var demo2 = xmSelect.render({
                el: '#demo2',
                filterable: true,
                searchTips: '输入立马搜索', //默认根据 name 进行搜索;
                data: list
            })


            var companyList = [{
                    name: '阿里巴巴集团',
                    value: 1
                },
                {
                    name: '腾旭有限公司',
                    value: 2
                },
                {
                    name: '京东电商集团',
                    value: 3
                },
            ];

            var demo3 = xmSelect.render({
                el: '#demo3',
                filterable: true,
                data: companyList,
                filterMethod: function(val, item, index, prop) { //重构搜索方法
                    if (val == item.value) { //把value相同的搜索出来
                        return true;
                    }
                    if (item.name.indexOf(val) != -1) { //名称中包含的搜索出来
                        return true;
                    }
                    return false; //不知道的就不管了
                }

            });

            /* 远程调用 */
            var url = 'https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search';
            var demo5 = xmSelect.render({
                el: '#demo5',
                direction: 'auto', //自动根据界面展示
                filterable: true,
                toolbar: {
                    show: true
                }, // 菜单工具; 全选 + 清空;  建议多选框加上这个选项;
                remoteSearch: true, //开启远程搜索;
                /* 远程调用函数, value是 框中输入的值 , cb 是回调函数 , show 不知道*/
                remoteMethod: function(val, cb, show) {
                    $.ajax({
                        type: "GET",
                        url: url,
                        data: "keyword=" + val,
                        success: function(resp) {
                            //   alert("Data Saved: " + resp);
                            console.log("resp: ", resp);
                            cb(resp.data)
                        },
                        error: function(resp) {
                            cb([]); //错误则回调数据 为 空;
                        }
                    });
                },
                data: [],
                //搜索完毕的回调;
                filterDone: function(val, list) {
                    console.log(`搜索完毕, 搜索关键词: ${val}, 过滤数据: ${list.length}个`);

                }
            });


            var demo6 = xmSelect.render({
                el: '#demo6',
                radio: true, // 控件设置为 单选
                clickClose: true, // 单选完毕, 直接关闭下拉
                model: {
                    label: {
                        type: 'text',
                        text: {
                            //左边拼接的字符
                            left: '- ',
                            //右边拼接的字符
                            right: ' -',
                            //中间的分隔符, 如果是 radio , 这个选项不会生效;
                            separator: ', ',
                        },
                    }
                },
                data: [{
                        name: '张三',
                        value: 1
                    },
                    {
                        name: '李四',
                        value: 2
                    },
                    {
                        name: '王五',
                        value: 3
                    },
                ]
            })

            //更换属性key , 自定义属性;


            var demo7 = xmSelect.render({
                el: '#demo7',

                //属性映射, 映射两个最关键的属性;
                prop: {
                    name: 'label',
                    value: 'id',
                },
                data: [{
                        label: '张三',
                        id: 1,
                        group: 1
                    },
                    {
                        label: '李四',
                        id: 2,
                        group: 1
                    },
                    {
                        label: '王五',
                        id: 3,
                        group: 2
                    },
                ],
                //自定义主题
                theme: {
                    color: '#9c26b0',
                }
            })

            document.getElementById('demo1-getValue').onclick = function() {
                //获取当前多选选中的值
                var selectArr = demo7.getValue();
                document.getElementById('demo1-value').innerHTML = JSON.stringify(selectArr, null, 2);
            }



            var demo8 = xmSelect.render({
                el: '#demo8',
                data: list,
                show() {

                    console.log("open");
                },
                hide() {

                    console.log("close");
                }
            })


            /* 数据二级联动*/
            var demo9 = xmSelect.render({
                el: '#demo9',
                data: list,
                size: 'mini',
                disabled: false,
                autoRow: true, //自动换行 破坏原有的 页面布局格式
                show() {
                    console.log("open");
                },
                hide() {

                    console.log("close");
                },
                on: function(data) {
                    //arr:  当前多选已选中的数据 , 这个数据是一个数组;
                    var arr = data.arr;
                    //change, 此次选择变化的数据,数组
                    var change = data.change;
                    //isAdd, 此次操作是新增还是删除
                    var isAdd = data.isAdd;

                    console.log('已有: ' + arr.length + ' 变化: ' + change.length + ', 状态: ' + isAdd );

                    console.log(arr);
                }
            })
        </script>

    </body>

</html>

<!-- 总结:

 使用这个控件其实就是
 1. 来一个 html DOM 元素;
 2. 在js 中使用一个 xmSelect 对象去渲染, 然后赋予各种参数即可;



 -->




